<template>
  <div class="bulletin-container">
    <title-bar
    :bar-title="barTitle"
    barStyleName='green'
    :more-path="morePath"></title-bar>
    <div class="bulletin-body">
      <data-grid :grid-list="bulletinGridList"></data-grid>
    </div>
  </div>
</template>
<script>
import TitleBar from './title-bar'
import DataGrid from './data-grid'
import { mapState } from 'vuex'

const MY = 'my'
const TEAM = 'team'
const COMPANY = 'company'

export default {
  props: {
    values: {
      type: Object,
      default: function () {
        return {
          new_custom: 0,
          new_dao_fang: 0,
          new_shi_ting: 0,
          new_signing: 0
        }
      }
    },
    id: {
      type: String | Number
    },
    type: {
      type: String
    },
    time: {
      type: String | Number
    },
    suid: {
      type: String | Number
    }
  },
  data () {
    return {
      bulletinGridList: [],
      barTitle: '销售简报',
      morePath: '/',
      newCustomLink: false,
      newSignLink: false
    }
  },
  watch: {
    values () {
      this.initData()
    }
  },
  components: {
    TitleBar,
    DataGrid
  },
  methods: {
    addGrid (grid) {
      this.bulletinGridList.push({
        icon: grid.icon,
        ttext: grid.ttext,
        btext: grid.btext,
        link: grid.link
      })
    },
    initLinks () {
      let query
      switch (this.type) {
        case MY:
          console.log(this.user.id, this.suid || !this.suid)
          if (parseInt(this.user.id) === parseInt(this.suid) || !this.suid) {
            query = {
              flag_id: this.suid,
              time: this.time,
              team_id: this.id,
              type: this.type
            }
            this.newCustomLink = {name: 'new-custom', query: query}
            this.newSignLink = {name: 'new-sign', query: query}
          } else {
            this.newCustomLink = false
            this.newSignLink = false
          }
          break;
        case TEAM:
          if (this.user.is_team_manager) {
            query = {
              flag_id: this.id,
              time: this.time,
              team_id: this.id,
              type: this.type
            }
            this.newCustomLink = {name: 'new-custom', query: query}
            this.newSignLink = {name: 'new-sign', query: query}
          } else {
            this.newCustomLink = false
            this.newSignLink = false
          }
          break;
        default:
          this.newCustomLink = false
          this.newSignLink = false
      }
    },
    initData () {
      let imgServer = this.$store.state.app.imgServer
      const values = this.values
      this.bulletinGridList = []
      this.initLinks()

      this.addGrid({
        icon: imgServer + 'freshCustoms.png',
        ttext: values.new_custom + '个',
        btext: '新增客户数',
        link: this.newCustomLink
      })
      this.addGrid({
        icon: imgServer + 'new_dian_fang.png',
        ttext: values.new_dian_fang + '个',
        btext: '新增电访数'
      })
      this.addGrid({
        icon: imgServer + 'visit.png',
        ttext: values.new_guan_mo + '个',
        btext: '新增观摩数'
      })
      this.addGrid({
        icon: imgServer + 'audition.png',
        ttext: values.new_shi_ting + '个',
        btext: '新增试听数'
      })
      this.addGrid({
        icon: imgServer + 'signContract.png',
        ttext: values.new_signing + '个',
        btext: '新增签约数',
        link: this.newSignLink
      })
      this.addGrid({
        icon: imgServer + 'new_invalid_custom.png',
        ttext: values.new_invalid_custom + '个',
        btext: '新增无效客户数'
      })
    }
  },
  beforeMount () {
    this.initData()
  },
  computed: {
    ...mapState({
      user: state => state.app.user
    })
  }
}
</script>
<style lang="less">
.bulletin-container {
  background-color: white;

  .bulletin-body {
    padding: 20px 0 0 15px;
    border-bottom: 1px solid #EDEDED;
  }
}
</style>
